<template>
    <div>
        <nav-bar>
            <template v-slot:default>分类商品</template>
        </nav-bar>
        <div id="mainbox">
            <!-- 头 -->
            <div class="ordertab">
                <van-tabs v-model="active" @click="tabClick">
                    <van-tab title="销量排序"></van-tab>
                    <van-tab title="价格排序"></van-tab>
                    <van-tab title="评化排序"></van-tab>
                </van-tabs>
            </div>
            <!-- 菜单 -->
            <van-sidebar v-model="activeKey" class="leftmenu">
                <van-collapse v-model="activeName" accordion>
                        <van-collapse-item
                             v-for="item in categories.slice(0,5)" :key="item.id"
                             :title="item.name" :name="item.name">
                                    <van-sidebar-item @click="getGoods(sub.id)" v-for="sub in item.children" :key="sub.id" :title="sub.name" />
                        </van-collapse-item>
                </van-collapse>    
            </van-sidebar>    
            <!-- 商品列表 -->
            <div class="goodslist">
                <div class="content">
                    <van-card
                        v-for="item in showGoods" :key="item.id"
                        @click="itemClick(item.id)"
                        :num="item.comments_count"
                        :tag="item.comments_count >= 0 ? '流行' : '标签'"
                        :price="item.price"
                        :desc="item.updated_at"
                        :title="item.title"
                        :thumb="item.cover_url"
                        :lazy-load="true"
                    />
                </div>
            </div>
            <!-- 返回顶部 -->
            <back-top @bTop="bTop" v-show="isShowBackTop" />
        </div>
        
    </div>
</template>
<script>
import NavBar from 'components/common/navbar/NavBar'
import {ref,reactive,onMounted,computed,watchEffect,nextTick} from 'vue'
import {useRouter} from 'vue-router'
import {getCategory,getCategoryGoods} from 'network/category'
// 滚动
import BScroll from 'better-scroll'
// 返回顶部
import BackTop from 'components/common/backtop/BackTop'
export default {
    name:'Category',
    setup(){
        // 路由
        const router = useRouter();
        let active = ref(1);
        let activeKey = ref(2);
        // 分类的数据
        let activeName = ref(1);
        let categories = ref([]);
        // 当前的排序条件
        let currentOrder = ref('sales');
        // 当前的分类id
        let currentCid = ref(0);
        // 滚动
        let bscroll = reactive({});
        // 把返回顶部的按钮默认显示为false
        let isShowBackTop = ref(false);

        //数据模型
        const goods = reactive({
            sales:{page:1,list:[]},
            price:{page:1,list:[]},
            comments_count:{page:1,list:[]}
        })

        // 返回接口的数据
        const showGoods = computed(()=>{
            return goods[currentOrder.value].list;
        })

        const init = () =>{
            getCategoryGoods('price',currentCid.value).then(res=>{
                // console.log(res);
                goods.price.list = res.goods.data;
            })
            getCategoryGoods('sales',currentCid.value).then(res=>{
                // console.log(res);
                goods.sales.list = res.goods.data;
            })
            getCategoryGoods('comments_count',currentCid.value).then(res=>{
                // console.log(res);
                goods.comments_count.list = res.goods.data;
            })
        }

        onMounted(()=>{
            // 获取分类信息
            getCategory().then(res=>{
                categories.value = res.categories;
            })

            // 切换页面的
            init();

            // 创建BetterScroll对象--滚动
            // 可以让页面进行滚动
            bscroll = new BScroll(document.querySelector('.goodslist'),{
                probeType: 3, //0,1,2,3,3是只要在运动就触发scroll事件
                click: true,   //是否允许点击
                pullUpLoad: true, //下拉加载更多，默认为假
            });

            // 注册滚动事件
            bscroll.on('scroll',(position)=>{
                // 如果页面下滑到大于300的时候，显示按钮
                isShowBackTop.value = (-position.y) > 300
            })

            // 滚动
            bscroll.on('pullingUp',()=>{
                // 分页
                const page = goods[currentOrder.value].page + 1;
                getCategoryGoods(currentOrder.value,currentCid.value).then(res=>{
                    goods[currentOrder.value].list.push(...res.goods.data);
                    goods[currentOrder.value].page += 1;
                })
                //完成上拉 刷新数据
                bscroll.finishPullUp();
                // 计算高度
                nextTick(()=>{
                    bscroll && bscroll.refresh();
                })
                // 重新计算高度
                bscroll.refresh();
            })
        })

        // 监听事件
        watchEffect(()=>{
            nextTick(()=>{
                bscroll && bscroll.refresh();
            })
        })

        // 排序选项卡
        const tabClick = (index)=>{
            let orders = ['sales','price','comments_count'];
            currentOrder.value = orders[index];
            getCategoryGoods(currentOrder.value,currentCid.value).then(res=>{
                // console.log(res);
                goods[currentOrder.value].list = res.goods.data;
                nextTick(()=>{
                    bscroll && bscroll.refresh();
                })
            })
            console.log("当前的分类id："+currentCid.value)
            console.log('排序的：'+currentOrder.value);
        }

        // 通过分类getGoods商品
        const getGoods = (cid)=>{
            currentCid.value = cid;
            init();
            console.log("当前的分类id："+currentCid.value)
            console.log('排序的：'+currentOrder.value);
        }

        
        // 返回顶部
        const bTop = ()=>{
            bscroll.scrollTo(0,0,300)
        }
        return{
            activeKey,
            categories,
            activeName,
            active,
            tabClick,
            currentOrder,
            getGoods,
            currentCid,
            // 数据模型
            goods,
            showGoods,
            bscroll,
            isShowBackTop,
            bTop,
            // 把点击的商品传到详情页面
            itemClick:(id)=>{
                router.push({path:'/detail',query:{id}});
            }
        }
    },
    components:{
        NavBar,
        BackTop
    }
}
</script>
<style scoped lang="scss">
    #mainbox{
        margin-top: 45px;
        display: flex;
        // 头
        .ordertab{
            flex: 1;
            float: right;
            height: 50px;
            z-index: 9;
            position: fixed;
            top: 45px;
            right: 0;
            left: 130px;
        }
        // 菜单
        .leftmenu{
            position: fixed;
            top: 95px;
            left: 0;
            width: 130px;
        }
        // 商品列表
        .goodslist{
            flex: 1;
            position: absolute;
            top: 100px;
            left: 130px;
            right: 0;
            height: 100vh;
            padding: 10px;
            .content{
                padding-top: 20px;
            }
        }
    }

</style>
